<template>
    <div class="appointment-page">
        <div class="date-picker-container">
            <div class="date-picker-header">
                <div class="header-left">
                    <el-icon><Calendar /></el-icon>
                    <span class="date-picker-title">预约管理</span>
                    <el-tooltip content="点击添加按钮可以新增预约" placement="top" effect="light">
                        <el-icon class="help-icon"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </div>
                <div class="header-actions">
                    <el-button type="primary" @click="openBookingDialog(null, null, 'add')" class="add-appointment-btn">
                        <el-icon class="plus-icon"><Plus /></el-icon>
                        添加预约
                    </el-button>
                </div>
            </div>
        </div>

        <div class="appointment-main">
            <!-- 房间维度 -->
            <div class="dimension-container room-dimension">
                <div class="dimension-header">
                    <el-icon><House /></el-icon>
                    <span class="dimension-title">房间</span>
                    <el-tooltip content="点击房间卡片可以快速预约该房间" placement="top" effect="light">
                        <el-icon class="help-icon"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </div>
                <div class="room-cards">
                    <div v-for="(room, index) in rooms" :key="index" class="card room-card" @click="openBookingDialog(room, null, 'room')">
                        <div class="card-title">{{ room[0].room_name }}</div>
                        <div class="card-content">
                            <div class="today-title">今日</div>
                            <div v-for="item in getTodayAppointments(room)" :key="item.id">
                                <span class="today-appointment">
                                    <span class="appointment-info"
                                        >{{ formatAppointmentTime(item.start_time, item.end_time) }} {{ item.medical_staff_name }}:{{
                                            item.patient_name
                                        }}</span
                                    >
                                    <el-button class="cancel-btn" type="danger" size="small" @click.stop="openCancelDialog(item)">X</el-button>
                                </span>
                            </div>
                            <template v-if="getFutureAppointmentCount(room)">
                                <el-button link type="primary" class="more-btn future-title" @click.stop="toggleFutureAppointments(room[0].room_id)">
                                    展开未来日期({{ getFutureAppointmentCount(room) }}条)
                                    <el-icon class="arrow-icon" :class="{ 'is-expanded': futureAppointmentsExpandedMap[room[0].room_id] }">
                                        <ArrowDown />
                                    </el-icon>
                                </el-button>
                                <div v-if="futureAppointmentsExpandedMap[room[0].room_id]" v-for="item in getFutureAppointments(room)" :key="item.id">
                                    <span class="not-today-appointment">
                                        <span class="appointment-info"
                                            >{{ formatAppointmentTime(item.start_time, item.end_time) }} {{ item.medical_staff_name }}:{{
                                                item.patient_name
                                            }}</span
                                        >
                                        <el-button class="cancel-btn" type="info" size="small" @click.stop="openCancelDialog(item)">X</el-button>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 治疗师维度 -->
            <div class="dimension-container medical-dimension">
                <div class="dimension-header">
                    <el-icon><User /></el-icon>
                    <span class="dimension-title">治疗师</span>
                    <el-tooltip content="点击治疗师卡片可以快速预约该治疗师" placement="top" effect="light">
                        <el-icon class="help-icon"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </div>
                <div class="medical-cards">
                    <div v-for="(med, index) in medicals" :key="index" class="card medical-card" @click="openBookingDialog(null, med, 'medical')">
                        <div class="card-title">{{ med[0].medical_staff_name }}</div>
                        <div class="card-content">
                            <div class="today-title">今日</div>
                            <div v-for="item in getTodayMedicalAppointments(med)" :key="item.id">
                                <span class="today-appointment">
                                    <span class="appointment-info"
                                        >{{ formatAppointmentTime(item.start_time, item.end_time) }} {{ item.room_name }}:{{
                                            item.patient_name
                                        }}</span
                                    >
                                    <el-button class="cancel-btn" type="danger" size="small" @click.stop="openCancelDialog(item)">X</el-button>
                                </span>
                            </div>
                            <template v-if="getFutureMedicalAppointmentCount(med)">
                                <el-button
                                    link
                                    type="primary"
                                    class="more-btn future-title"
                                    @click.stop="toggleFutureMedicalAppointments(med[0].medical_staff_id)"
                                >
                                    展开未来日期({{ getFutureMedicalAppointmentCount(med) }}条)
                                    <el-icon
                                        class="arrow-icon"
                                        :class="{ 'is-expanded': futureMedicalAppointmentsExpandedMap[med[0].medical_staff_id] }"
                                    >
                                        <ArrowDown />
                                    </el-icon>
                                </el-button>
                                <div
                                    v-if="futureMedicalAppointmentsExpandedMap[med[0].medical_staff_id]"
                                    v-for="item in getFutureMedicalAppointments(med)"
                                    :key="item.id"
                                >
                                    <span class="not-today-appointment">
                                        <span class="appointment-info"
                                            >{{ formatAppointmentTime(item.start_time, item.end_time) }} {{ item.room_name }}:{{
                                                item.patient_name
                                            }}</span
                                        >
                                        <el-button class="cancel-btn" size="small" @click.stop="openCancelDialog(item)">X</el-button>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 预约弹窗 -->
        <el-dialog
            v-model="showBookingDialog"
            title="预约"
            width="600px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="true"
        >
            <el-form :model="bookingForm" label-width="80px">
                <!-- <el-form-item label="预约日期" required>
                    <el-date-picker
                        v-model="bookingForm.appointment_date"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :clearable="false"
                        placeholder="选择日期"
                        :disabled-date="(time: Date) => time.getTime() < Date.now() - 8.64e7"
                    />
                </el-form-item> -->
                <el-form-item label="房间" required>
                    <el-select
                        v-model="bookingForm.room_id"
                        :disabled="bookingForm.room_locked"
                        filterable
                        remote
                        reserve-keyword
                        :remote-method="fetchRooms"
                        placeholder="请选择房间"
                    >
                        <el-option v-for="room in 表单房间数据" :key="room.id" :label="room.name" :value="room.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="治疗师" required>
                    <el-select
                        v-model="bookingForm.medical_staff_id"
                        :disabled="bookingForm.medical_locked"
                        filterable
                        remote
                        reserve-keyword
                        :remote-method="fetchMedicals"
                        placeholder="请选择治疗师"
                    >
                        <el-option v-for="med in 表单治疗师数据" :key="med.id" :label="med.name" :value="med.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间" required>
                    <el-date-picker
                        v-model="bookingForm.appointment_date"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :clearable="false"
                        placeholder="选择日期"
                        style="width: 150px"
                        :disabled-date="(time: Date) => time.getTime() < Date.now() - 8.64e7"
                    />
                    <el-time-select
                        v-model="bookingForm.start_time"
                        :max-time="bookingForm.end_time"
                        style="width: 150px"
                        placeholder="开始时间"
                        prop="start_time"
                        :start="getStartTime"
                        step="00:05"
                        end="24:00"
                        format="HH:mm"
                        value-format="HH:mm"
                    />
                    ~
                    <el-time-select
                        v-model="bookingForm.end_time"
                        :min-time="bookingForm.start_time"
                        style="width: 150px"
                        placeholder="结束时间"
                        prop="end_time"
                        :start="getStartTime"
                        step="00:05"
                        end="24:00"
                        format="HH:mm"
                        value-format="HH:mm"
                    />
                </el-form-item>
                <!-- <el-form-item label="结束时间">
                    <el-time-picker v-model="bookingForm.end_time" placeholder="选择时间" />
                </el-form-item> -->
                <el-form-item label="患者姓名">
                    <el-input v-model="bookingForm.patient_name" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input
                        v-model="bookingForm.patient_phone"
                        maxlength="11"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        placeholder="请输入手机号"
                    />
                </el-form-item>
                <el-form-item label="症状">
                    <el-input v-model="bookingForm.symptoms" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showBookingDialog = false">取消</el-button>
                <el-button type="primary" @click="submitBooking">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, computed, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { House, User, QuestionFilled, Calendar, ArrowDown, ArrowUp, Plus, Close } from '@element-plus/icons-vue'
import createAxios from '/@/utils/axios'
import dayjs from 'dayjs'

const rooms = ref<{ [key: string]: any[] }>({}) //后台返回的房间数据
const medicals = ref<{ [key: string]: any[] }>({}) //后台返回的治疗师数据
const 表单房间数据 = ref<any[]>([])
const 表单治疗师数据 = ref<any[]>([])
const showBookingDialog = ref(false)
let timer: number | null = null

interface AppointmentData {
    room_id: number
    room_name: string
    medical_staff_name: string | null
    medical_staff_id: number | null
    appointment_id: number | null
    start_time: string | null
    end_time: string | null
    patient_name: string | null
    patient_phone: string | null
}

const bookingForm = ref<any>({
    room_id: null,
    room_locked: false,
    medical_staff_id: null,
    medical_locked: false,
    appointment_date: '',
    start_time: '',
    end_time: '',
    patient_name: '',
    patient_phone: '',
    symptoms: '',
})

// 获取开始时间
const getStartTime = computed(() => {
    if (bookingForm.value.appointment_date) {
        const isToday = dayjs(bookingForm.value.appointment_date).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')
        if (isToday) {
            // 如果是当天，返回当前时间减5分钟
            const currentTime = dayjs().subtract(5, 'minute')
            const roundedTime = currentTime.minute(Math.floor(currentTime.minute() / 5) * 5)
            return roundedTime.format('HH:mm')
        }
    }
    return '06:00'
})

// 控制每个房间的未来预约展开状态
const futureAppointmentsExpandedMap = ref<{ [roomId: string]: boolean }>({})

// 控制每个治疗师的未来预约展开状态
const futureMedicalAppointmentsExpandedMap = ref<{ [medicalId: string]: boolean }>({})

function fetchData() {
    createAxios({
        url: '/admin/appointment/appointment',
        method: 'get',
    }).then((res) => {
        rooms.value = res.data.rooms
        medicals.value = res.data.medicals
    })
}

// 远程搜索房间
function fetchRooms(query: string) {
    createAxios({
        url: '/admin/room/index',
        method: 'get',
        params: { quickSearch: query },
    }).then((res) => {
        表单房间数据.value = res.data.list
    })
}

// 远程搜索治疗师
function fetchMedicals(query: string) {
    createAxios({
        url: '/admin/MedicalStaff/index',
        method: 'get',
        params: { quickSearch: query },
    }).then((res) => {
        表单治疗师数据.value = res.data.list
    })
}

// 打开预约弹窗
function openBookingDialog(room: any, med: any, type: 'room' | 'medical' | 'add') {
    showBookingDialog.value = true
    // 重置表单
    bookingForm.value = {
        room_id: null,
        room_locked: false,
        medical_staff_id: null,
        medical_locked: false,
        appointment_date: dayjs().format('YYYY-MM-DD'),
        start_time: '',
        end_time: '',
        patient_name: '',
        patient_phone: '',
        symptoms: '',
    }

    if (type === 'room') {
        bookingForm.value.room_id = room[0].room_id
        bookingForm.value.room_locked = true
        // 预加载房间数据
        表单房间数据.value = [
            {
                id: room[0].room_id,
                name: room[0].room_name,
            },
        ]
    } else if (type === 'medical') {
        bookingForm.value.medical_staff_id = med[0].medical_staff_id
        bookingForm.value.medical_locked = true
        // 预加载治疗师数据
        表单治疗师数据.value = [
            {
                id: med[0].medical_staff_id,
                name: med[0].medical_staff_name,
            },
        ]
    }
    // 如果是直接添加，则预加载所有房间和治疗师数据
    if (type === 'add') {
        fetchRooms('')
        fetchMedicals('')
    }
}

// 提交预约
function submitBooking() {
    createAxios({
        url: '/admin/appointment/add',
        method: 'POST',
        data: {
            ...bookingForm.value,
        },
    }).then(() => {
        ElMessage.success('预约成功')
        showBookingDialog.value = false
        fetchData()
    })
}

// 判断是否为当天预约
function isTodayAppointment(startTime: string) {
    if (!startTime) return false
    return dayjs(startTime).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')
}

// 格式化时间
function formatAppointmentTime(start: string, end: string) {
    if (!start || !end) return ''
    if (isTodayAppointment(start)) {
        return `${start.slice(11, 16)}-${end.slice(11, 16)}`
    }
    return `${dayjs(start).format('MM-DD')} ${start.slice(11, 16)}-${end.slice(11, 16)}`
}

// 获取今日预约
function getTodayAppointments(room: any[]) {
    return getSortedAppointments(room.filter((i: any) => i.appointment_id && isTodayAppointment(i.start_time)))
}

// 获取未来预约
function getFutureAppointments(room: any[]) {
    return getSortedAppointments(room.filter((i: any) => i.appointment_id && !isTodayAppointment(i.start_time)))
}

// 获取治疗师今日预约
function getTodayMedicalAppointments(med: any[]) {
    return getSortedAppointments(med.filter((i: any) => i.appointment_id && isTodayAppointment(i.start_time)))
}

// 获取治疗师未来预约
function getFutureMedicalAppointments(med: any[]) {
    return getSortedAppointments(med.filter((i: any) => i.appointment_id && !isTodayAppointment(i.start_time)))
}

// 获取未来预约数量
function getFutureAppointmentCount(room: any[]) {
    return room.filter((i: any) => i.appointment_id && !isTodayAppointment(i.start_time)).length
}

// 获取治疗师未来预约数量
function getFutureMedicalAppointmentCount(med: any[]) {
    return med.filter((i: any) => i.appointment_id && !isTodayAppointment(i.start_time)).length
}

// 获取排序后的预约列表
function getSortedAppointments(appointments: any[]) {
    return [...appointments].sort((a, b) => {
        return new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
    })
}

// 切换房间未来预约的展开状态
function toggleFutureAppointments(roomId: string) {
    futureAppointmentsExpandedMap.value[roomId] = !futureAppointmentsExpandedMap.value[roomId]
}

// 切换治疗师未来预约的展开状态
function toggleFutureMedicalAppointments(medicalId: string) {
    futureMedicalAppointmentsExpandedMap.value[medicalId] = !futureMedicalAppointmentsExpandedMap.value[medicalId]
}

// 取消预约
function openCancelDialog(appointment: any) {
    ElMessageBox.confirm('确定要取消该预约吗？', '取消预约', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            createAxios({
                url: '/admin/appointment/cancel',
                method: 'POST',
                data: {
                    id: appointment.appointment_id,
                    cancel_reason: '快速预约界面取消',
                },
            }).then(() => {
                ElMessage.success('取消预约成功')
                fetchData()
            })
        })
        .catch(() => {
            // 用户取消操作
        })
}

// 检查并移除过期预约
function checkAndRemoveExpiredAppointments() {
    const now = new Date()
    // 处理房间维度的预约
    Object.keys(rooms.value).forEach((roomId) => {
        if (rooms.value[roomId] && Array.isArray(rooms.value[roomId])) {
            rooms.value[roomId] = rooms.value[roomId].filter((room: AppointmentData) => {
                // console.log(room)
                if (room.appointment_id && room.end_time) {
                    const endTime = new Date(room.end_time)
                    return endTime > now
                }
                return true // 保留没有预约的数据
            })
        }
    })

    // 处理治疗师维度的预约
    Object.keys(medicals.value).forEach((medId) => {
        if (medicals.value[medId] && Array.isArray(medicals.value[medId])) {
            medicals.value[medId] = medicals.value[medId].filter((med: AppointmentData) => {
                // console.log(med)
                if (med.appointment_id && med.end_time) {
                    const endTime = new Date(med.end_time)
                    return endTime > now
                }
                return true // 保留没有预约的数据
            })
        }
    })
}

// 启动定时器
function startExpirationCheck() {
    if (timer) {
        clearInterval(timer)
    }
    timer = window.setInterval(checkAndRemoveExpiredAppointments, 2000)
}

// 组件挂载时启动定时器
onMounted(() => {
    fetchData()
    startExpirationCheck()
})

// 组件卸载时清除定时器
onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
        timer = null
    }
})

// 在获取数据后重新启动定时器
const getAppointmentData = async () => {
    try {
        const res = await createAxios({
            url: '/admin/appointment/getAppointmentData',
            method: 'GET',
        })
        if (res.data.code === 1) {
            rooms.value = res.data.data.rooms
            medicals.value = res.data.data.medicals
            startExpirationCheck() // 重新启动定时器
        }
    } catch (error) {
        console.error('获取预约数据失败:', error)
    }
}
</script>

<style scoped lang="scss">
.appointment-page {
    background: #f6f9f4;
    padding: 10px;
    min-height: 100vh;

    :deep(.help-icon) {
        font-size: 12px !important;
        color: #909399 !important;
        opacity: 0.4 !important;
        margin-left: 4px !important;
    }

    .date-picker-container {
        background: #fff;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 4px;

        .date-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-left {
                display: flex;
                align-items: center;
            }

            .el-icon {
                font-size: 20px;
                margin-right: 8px;
                color: #4caf50;
            }

            .date-picker-title {
                font-size: 18px;
                font-weight: bold;
                color: #333;
            }

            .help-icon {
                margin-left: 8px;
                color: #909399;
                cursor: help;
            }

            .header-actions {
                .el-button {
                    .el-icon {
                        margin-right: 4px;
                    }
                }

                .add-appointment-btn {
                    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
                    border: none;
                    padding: 10px 20px;
                    border-radius: 6px;
                    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
                    transition: all 0.3s ease;

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
                        background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
                    }

                    &:active {
                        transform: translateY(0);
                        box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
                    }

                    .plus-icon {
                        font-size: 20px;
                        font-weight: bold;
                        margin-right: 8px;
                        vertical-align: middle;
                        // background: rgba(87, 100, 132, 0.8);
                        color: #fdfffd;
                        padding: 4px;
                        border-radius: 4px;
                    }
                }
            }
        }
    }

    .appointment-main {
        display: flex;
        justify-content: space-between;
        gap: 3px;

        .dimension-container {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

            .dimension-header {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 12px;
                border-bottom: 1px solid #ebeef5;

                .el-icon {
                    font-size: 20px;
                    margin-right: 8px;
                }

                .dimension-title {
                    font-size: 18px;
                    font-weight: bold;
                    color: #333;
                }

                .help-icon {
                    margin-left: 8px;
                    color: #909399;
                    cursor: help;
                }
            }
        }

        .room-dimension {
            .el-icon {
                color: #4caf50;
            }
        }

        .medical-dimension {
            .el-icon {
                color: #2196f3;
            }

            .medical-card {
                border: 2px solid #2196f3;
                background: linear-gradient(to bottom right, #ffffff, #f5f9ff);

                &:hover {
                    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2);
                }

                .card-title {
                    color: #1976d2;
                }

                .today-appointment {
                    color: #2196f3;
                }

                .not-today-appointment {
                    color: #90caf9;
                }
            }
        }

        .room-cards,
        .medical-cards {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 5px;
            width: 100%;

            @media screen and (min-width: 1800px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            @media screen and (max-width: 1400px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media screen and (max-width: 768px) {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }
        }

        .card {
            border-radius: 12px;
            box-shadow: 0 2px 8px #e0e0e0;
            background: #fff;
            padding: 12px;
            cursor: pointer;
            transition: box-shadow 0.2s;
            min-height: 120px;
            width: 100%;
            box-sizing: border-box;

            &:hover {
                box-shadow: 0 4px 16px #b2dfdb;
            }
        }

        .room-card {
            border: 2px solid #4caf50;
        }

        .medical-card {
            border: 2px solid #81c784;
        }

        .card-title {
            font-weight: bold;
            color: #388e3c;
            margin-bottom: 8px;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-content {
            color: #333;
            font-size: 15px;

            .today-appointment {
                color: #4caf50;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 4px 8px;
                border-radius: 4px;
                transition: all 0.3s;

                &:hover {
                    background-color: rgba(76, 175, 80, 0.1);
                }

                .appointment-info {
                    flex: 1;
                    margin-right: 8px;
                }

                .cancel-btn {
                    margin-left: 8px;
                    padding: 2px 6px;
                    font-size: 12px;
                    height: auto;
                    line-height: 1;
                    border: none;
                    background: transparent;
                    color: #909399;
                    transition: all 0.3s ease;

                    &:hover {
                        color: #f56c6c;
                        background: transparent;
                    }

                    &:active {
                        color: #f56c6c;
                        background: transparent;
                    }
                }
            }

            .not-today-appointment {
                color: #bbb;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 4px 8px;
                border-radius: 4px;
                transition: all 0.3s;

                &:hover {
                    background-color: rgba(187, 187, 187, 0.1);
                }

                .appointment-info {
                    flex: 1;
                    margin-right: 8px;
                }

                .cancel-btn {
                    margin-left: 8px;
                    padding: 2px 6px;
                    font-size: 12px;
                    height: auto;
                    line-height: 1;
                    border: none;
                    background: transparent;
                    color: #909399;
                    transition: all 0.3s ease;

                    &:hover {
                        color: #f56c6c;
                        background: transparent;
                    }

                    &:active {
                        color: #f56c6c;
                        background: transparent;
                    }
                }
            }

            .more-btn {
                margin-top: 8px;
            }

            .no-data {
                color: #909399;
                font-size: 14px;
                margin-top: 8px;
                display: block;
            }

            .today-title,
            .future-title {
                font-size: 14px;
                color: #606266;
                margin: 8px 0;
                font-weight: bold;
            }

            .future-title {
                margin-top: 16px;
            }

            span {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .arrow-icon {
        margin-left: 4px;
        transition: transform 0.3s ease;
        font-size: 12px;
        vertical-align: middle;

        &.is-expanded {
            transform: rotate(180deg);
        }
    }
}
</style>
